<template>
  <li
    class="abstract-message-list-item"
  >
    <div class="author">
      <mu-avatar>
        <img :src="avatarUrl">
      </mu-avatar>
      <p class="author-name mu-secondary-text">{{ authorName }}</p>
    </div>
    <div class="main">
      <slot name="main-header"></slot>
      <p class="main-content">{{ commentContent }}</p>
      <div class="main-footer mu-text-secondary">
        <template v-if="sameTime">
          <span class="info-item">{{ toDatetimeString(createAt) }}</span>
        </template>
        <template v-else>
          <span class="info-item">{{ updateAtText }}：{{ toDatetimeString(updateAt) }}</span>
          <span class="info-item">{{ createAtText }}：{{ toDatetimeString(createAt) }}</span>
        </template>
        <span v-if="isAuthor" class="info-item">
          <a href="javascript:;" @click="$emit('edit')">{{ editText }}</a>
        </span>
        <span v-if="isAuthor" class="info-item">
          <a href="javascript:;" @click="$emit('remove')">{{ removeText }}</a>
        </span>
      </div>
    </div>
    <div class="actions">
      <slot name="actions"></slot>
    </div>
  </li>
</template>

<script>
import { mapGetters } from 'vuex'
import { parseTime } from '@/util'
import defaultAvatar from '@/assets/default_avatar.jpg'

const currentYear = new Date().getFullYear()

export default {
  name: 'AbstractMessageListItem',
  props: {
    authorAvatarUrl: {
      required: true,
      validator(value) {
        return value === null || typeof value === 'string'
      }
    },
    authorId: {
      type: Number,
      required: true
    },
    authorName: {
      type: String,
      required: true
    },
    commentContent: {
      type: String,
      required: true
    },
    createAt: {
      type: Number,
      required: true
    },
    updateAt: {
      type: Number,
      required: true
    },
    editText: {
      type: String,
      default: '编辑留言'
    },
    removeText: {
      type: String,
      default: '撤销留言'
    },
    createAtText: {
      type: String,
      default: '发表时间'
    },
    updateAtText: {
      type: String,
      default: '最后更新'
    }
  },
  computed: {
    ...mapGetters({
      currentUser: 'currentUser'
    }),
    avatarUrl() {
      return this.authorAvatarUrl || defaultAvatar
    },
    sameTime() {
      return this.createAt === this.updateAt
    },
    isAuthor() {
      const currentUserId = this.currentUser ? this.currentUser.id : 0
      return currentUserId === this.authorId
    }
  },
  methods: {
    toDatetimeString(time) {
      const d = new Date(time)
      const format = (d.getFullYear() === currentYear) ? '{m}-{d} {h}:{i}' : '{y}-{m}-{d} {h}:{i}'
      return parseTime(time, format)
    }
  }
}
</script>

<style scoped>
.abstract-message-list-item:first-child {
  border-top: 1px dotted #aaa;
}
.abstract-message-list-item {
  display: flex;
  padding: 16px;
  border-bottom: 1px dotted #aaa;
}

.author {
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
}
.author-name {
  margin-top: 8px;
}

.main {
  flex: 1 1 auto;
  min-height: 75px;
  display: flex;
  flex-flow: column nowrap;
}
.main-content {
  padding: 0 16px;
  flex: 1 1 auto;
  white-space: pre-wrap;
  word-break: break-all;
}
.main-footer {
  text-align: right;
  font-size: 0.8em;
}

.info-item {
  padding: 0 4px;
}
.info-item + .info-item {
  border-left: 1px solid #aaa;
}

.actions {
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
}

.is-phone .abstract-message-list-item {
  padding: 8px;
}
.is-phone .main-content {
  padding: 0 8px;
}
.is-phone .info-item {
  display: block;
  border-left: none;
  padding: 0 2px;
}
</style>
